import 'package:flutter/material.dart';
import 'package:inventory_system/screens/login/login_screen.dart';
import 'package:inventory_system/screens/profile/profile_screen.dart';
import 'package:inventory_system/screens/settings/settings_screen.dart';
import 'package:inventory_system/screens/user_settings_screen.dart';
import 'sidebar.dart';

class TopBar extends StatelessWidget {
  // ئۇقتۇرۇش دىئالوگنى كۆرسىتىش ئۈچۈن فۇنكسىيە
  final VoidCallback onNotificationsPressed;

  const TopBar({
    Key? key,
    required this.onNotificationsPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // ئىزدەش قىسمى
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(left: 16),
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(4),
              ),
              child: TextField(
                textDirection: TextDirection.rtl,
                decoration: InputDecoration(
                  hintText: 'ئىزدەش...',
                  hintTextDirection: TextDirection.rtl,
                  prefixIcon: const Icon(Icons.search, color: Colors.grey),
                  border: InputBorder.none,
                  contentPadding:
                      const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                ),
              ),
            ),
          ),

          // كىچىك كۇنۇپكىلار
          Row(
            children: [
              PopupMenuButton<String>(
                icon: Icon(Icons.language, color: Colors.grey[600]),
                offset: const Offset(0, 40),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                itemBuilder: (BuildContext context) => [
                  _buildLanguageMenuItem(
                    flag: '🇨🇳',
                    language: 'ئۇيغۇرچە',
                    isSelected: true,
                  ),
                  _buildLanguageMenuItem(
                    flag: '🇨🇳',
                    language: '中文',
                    isSelected: false,
                  ),
                  _buildLanguageMenuItem(
                    flag: '🇺🇸',
                    language: 'English',
                    isSelected: false,
                  ),
                ],
                onSelected: (String value) {
                  // بۇ يەردە تىل ئۆزگەرتىش قىلىنىدۇ
                },
              ),
              const SizedBox(width: 8),
              PopupMenuButton<String>(
                icon: Icon(Icons.brush, color: Colors.grey[600]),
                offset: const Offset(0, 40),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                itemBuilder: (BuildContext context) => [
                  _buildThemeMenuItem(
                    icon: Icons.light_mode,
                    title: 'يورۇق ئۇسلۇب',
                    isSelected: true,
                  ),
                  _buildThemeMenuItem(
                    icon: Icons.dark_mode,
                    title: 'قارا ئۇسلۇب',
                    isSelected: false,
                  ),
                  _buildThemeMenuItem(
                    icon: Icons.settings_system_daydream,
                    title: 'سىستېما ئۇسلۇبى',
                    isSelected: false,
                  ),
                ],
                onSelected: (String value) {
                  // بۇ يەردە ئۇسلۇب ئۆزگەرتىش قىلىنىدۇ
                },
              ),
              const SizedBox(width: 8),
              Stack(
                children: [
                  IconButton(
                    icon: Icon(Icons.notifications, color: Colors.grey[600]),
                    onPressed: onNotificationsPressed,
                  ),
                  Positioned(
                    right: 8,
                    top: 8,
                    child: Container(
                      padding: const EdgeInsets.all(4),
                      decoration: const BoxDecoration(
                        color: Colors.red,
                        shape: BoxShape.circle,
                      ),
                      child: const Text(
                        '3',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(width: 8),
              PopupMenuButton<String>(
                icon: Icon(Icons.person, color: Colors.grey[600]),
                offset: const Offset(0, 40),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                itemBuilder: (BuildContext context) => [
                  _buildUserMenuItem(
                    icon: Icons.account_circle,
                    title: 'شەخسىي ئۇچۇر',
                  ),
                  _buildUserMenuItem(
                    icon: Icons.settings,
                    title: 'تەڭشەكلەر',
                  ),
                  const PopupMenuDivider(),
                  _buildUserMenuItem(
                    icon: Icons.logout,
                    title: 'چېكىنىش',
                  ),
                ],
                onSelected: (String value) {
                  switch (value) {
                    case 'شەخسىي ئۇچۇر':
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const ProfileScreen(),
                        ),
                      );
                      break;
                    case 'تەڭشەكلەر':
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const SettingsScreen(),
                        ),
                      );
                      break;
                    case 'چېكىنىش':
                      _showLogoutDialog(context);
                      break;
                  }
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  // تىزىملىك ئاستىدىكى ئىشلەتكۈچى مەلۇماتلىرى
  PopupMenuItem<String> _buildUserMenuItem({
    required IconData icon,
    required String title,
  }) {
    return PopupMenuItem<String>(
      value: title,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, color: Colors.grey[600], size: 20),
          const SizedBox(width: 12),
          Flexible(
            child: Text(
              title,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }

  // تىل تاللاش تۈرى
  PopupMenuEntry<String> _buildLanguageMenuItem({
    required String flag,
    required String language,
    required bool isSelected,
  }) {
    return PopupMenuItem<String>(
      value: language,
      child: Row(
        children: [
          Text(flag, style: const TextStyle(fontSize: 24)),
          const SizedBox(width: 12),
          Text(language),
          if (isSelected) ...[
            const Spacer(),
            const Icon(Icons.check_circle, color: Colors.blue, size: 20),
          ],
        ],
      ),
    );
  }

  // ئۇسلۇب تاللاش تۈرى
  PopupMenuEntry<String> _buildThemeMenuItem({
    required IconData icon,
    required String title,
    required bool isSelected,
  }) {
    return PopupMenuItem<String>(
      value: title,
      child: Row(
        children: [
          Icon(icon, color: Colors.grey[600], size: 20),
          const SizedBox(width: 12),
          Text(title),
          if (isSelected) ...[
            const Spacer(),
            const Icon(Icons.check_circle, color: Colors.blue, size: 20),
          ],
        ],
      ),
    );
  }

  // چېكىنىش دىئالوگىنى كۆرسىتىش فۇنكسىيىسى
  void _showLogoutDialog(BuildContext context) {
    // تاسادىپىي ئىشلىتىلىدىغان ئانىماتسىيە تىپىنى تاللاش
    final animationType = DateTime.now().millisecondsSinceEpoch % 4;
    
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: 'چېكىنىش دىئالوگىنى يوشۇرۇش',
      barrierColor: Colors.black.withOpacity(0.5),
      transitionDuration: const Duration(milliseconds: 400),
      pageBuilder: (context, anim1, anim2) => Container(),
      transitionBuilder: (context, animation, secondaryAnimation, child) {
        Offset begin;
        Offset end = Offset.zero;
        Curve curve = Curves.easeInOutCubic;
        
        // ھەر قېتىم ئوخشىمىغان ئانىماتسىيە
        switch (animationType) {
          case 0: // تۆۋەندىن يۇقىرىغا سىيرىلىش
            begin = const Offset(0.0, 0.5);
            break;
          case 1: // يۇقىرىدىن تۆۋەنگە سىيرىلىش
            begin = const Offset(0.0, -0.5);
            curve = Curves.bounceOut;
            break;
          case 2: // ئوڭدىن سولغا سىيرىلىش
            begin = const Offset(0.5, 0.0);
            break;
          case 3: // سولدىن ئوڭغا سىيرىلىش
            begin = const Offset(-0.5, 0.0);
            break;
          default:
            begin = const Offset(0.0, 0.2);
        }
        
        final curvedAnimation = CurvedAnimation(parent: animation, curve: curve);
        final Animation<Offset> offsetAnimation = Tween<Offset>(begin: begin, end: end).animate(curvedAnimation);
        
        return SlideTransition(
          position: offsetAnimation,
          child: FadeTransition(
            opacity: animation,
            child: ScaleTransition(
              scale: Tween<double>(begin: 0.8, end: 1.0).animate(curvedAnimation),
              child: AlertDialog(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(24),
                ),
                contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                backgroundColor: Colors.white.withOpacity(0.95),
                title: const Text(
                  'چېكىنىش',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                content: SizedBox(
                  width: 280,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      TweenAnimationBuilder<double>(
                        tween: Tween<double>(begin: 0.8, end: 1.0),
                        duration: const Duration(milliseconds: 500),
                        builder: (context, value, child) {
                          return Transform.scale(
                            scale: value,
                            child: child,
                          );
                        },
                        child: const Icon(
                          Icons.logout,
                          size: 56,
                          color: Colors.orange,
                        ),
                      ),
                      const SizedBox(height: 16),
                      const Text(
                        'راستىنلا چېكىنمەكچىمۇ؟',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),
                ),
                actions: [
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          style: TextButton.styleFrom(
                            backgroundColor: Colors.grey.withOpacity(0.2),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16),
                            ),
                          ),
                          child: const Text('ياق'),
                        ),
                        const SizedBox(width: 16),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context); // دىئالوگنى يېپىش
                            
                            // ئانىماتسىيە ئارقىلىق چېكىنىش
                            Navigator.of(context).push(
                              PageRouteBuilder(
                                transitionDuration: const Duration(milliseconds: 500),
                                pageBuilder: (context, animation, secondaryAnimation) => const LoginScreen(),
                                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                                  // قايتىش ئانىماتسىيىسى
                                  final curvedAnimation = CurvedAnimation(
                                    parent: animation,
                                    curve: Curves.easeInOut,
                                  );
                                  
                                  // ئانىماتسىيە تىپىنى تاللاش
                                  switch (animationType) {
                                    case 0: // سولغۇچ ئانىماتسىيە
                                      return FadeTransition(
                                        opacity: curvedAnimation,
                                        child: child,
                                      );
                                    case 1: // چوڭىيىش ئانىماتسىيىسى
                                      return ScaleTransition(
                                        scale: curvedAnimation,
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                    case 2: // ئايلىنىش ئانىماتسىيىسى
                                      return RotationTransition(
                                        turns: Tween<double>(begin: 0.0, end: 0.05).animate(curvedAnimation),
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                    default: // سىيرىلىش ئانىماتسىيىسى
                                      return SlideTransition(
                                        position: Tween<Offset>(
                                          begin: const Offset(0.0, 0.2),
                                          end: Offset.zero,
                                        ).animate(curvedAnimation),
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                  }
                                },
                              ),
                            );
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blue,
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16),
                            ),
                          ),
                          child: const Text('ھەئە'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
} 